<template>
	<view>
		<view class="showButton" @click="clickModal" ref="showName" v-tooltip trigger="focus" :content="tip">
			<block v-if="showName">{{showName}}</block>
			<view v-else style="color: #888888;text-align: center;line-height: 60rpx;">{{placeholder}}</view>
		</view>
		<view class="modal" v-if="openModal">
			<view class="main">
				<view class="search-view">
					<view class="search-input">
						<view class="icon sousuo"></view>
						<input confirm-type="search" v-model="keyword" @confirm="getData" type="text" placeholder="输入关键词搜索!" />
					</view>
				</view>
				<view class="table">
					<view style="display: flex;">
						<view class="tr">
							<view class="th">选择</view>
							<block v-for="(v,k) in tables" :key="k">
								<view class="th">{{v.title}}</view>
							</block>
							<block v-for="(v,k) in form" :key="k">
								<view class="th">{{v.name}}</view>
							</block>
						</view>
					</view>
					<radio-group @change="radioChange">
						<label v-for="(item,index) in datas" :key="index" class="tr" :class="selectData.id == item.id ? 'active' : ''" @click="clickRadio(selectData.id == item.id)">
							<radio class="td" :value="item.id" :checked="selectData.id == item.id"/>
							<view class="td" v-for="(v,k) in tables" :key="k">{{item[v.field]}}</view>
							<view class="td" v-for="(v,k) in form" :key="k">
								<block v-if="v.type == 'radio' || v.type == 'checkbox' || v.type == 'select'">{{item.form[v.field]}}</block>
								<img v-else-if="v.type=='uploads'" :src="item.form[v.field]" style="width: 90rpx;height: 90rpx;">
								<block v-else>{{item.form[v.field]}}</block>
							</view>
						</label>
					</radio-group>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	props: {
		url: String,
		placeholder: String,
		show: String,
		value: {
			type: Number
		}
	},
	data() {
		return {
			openModal : false,
			datas : [],
			keyword : '',
			tables : [],
			form: [],
			selectData : {},
			tip: '',
			showName : '',
			page: 0
		}
	},
	watch:{
		show(value){
			this.showName = value
			this.keyword = value
			this.tip = '数据发生了变化,点击选择!'
			setTimeout(()=>{this.$refs.showName.focus()},100)
		}
	},
	mounted() {
		this.format()
		if(this.show){
			this.showName = this.show
		}else if(this.value > 0){
			this.showDefault()
		}
	},
	methods: {
		clickRadio (e){
			if(e){
				this.openModal = false
			}
		},
		clickModal(){
			this.openModal = !this.openModal
			this.tip = ''
			if(this.openModal){
				if(this.datas.length == 0){
					this.getData()
				}
			}
		},
		radioChange(e){
			this.datas.forEach(v=>{
				if(v.id == e.target.value){
					this.selectData = v
				}
			})
			this.showName = ''
			if(this.tables.length > 0){
				this.tables.forEach(v=>{
					this.showName += this.selectData[v.field] + ' '
				})
			}
			if(this.form.length > 0){
				this.form.forEach(v=>{
					if(v.type == 'input'){
						this.showName += this.selectData.form[v.field] + ' '
					}
				})
			}
			if(this.selectData.id > 0){
				this.$emit('input',this.selectData.id)
				this.$emit('confirm',this.selectData)
			}
			this.openModal = !this.openModal
		},
		format(){
			let form = null
			if(this.url == 'address' && getApp().globalData.config.address_form_id > 0){
				form = this.$getConfig('forms',getApp().globalData.config.address_form_id,'data')
			}else if(this.url == 'order'){
				this.tables.push({title:'订单号',field:'number'})
				this.tables.push({title:'总价',field:'money'})
			}else if(this.url == 'product'){
				this.tables.push({title:'名称',field:'name'})
				this.tables.push({title:'参考价',field:'price'})
			}else if(this.url == 'news'){
				this.tables.push({title:'标题',field:'name'})
			}else{
				this.tables.push({title:'名称',field:'name'})
			}
			if(form){
				form.forEach(v=>{
					this.form.push(v)
				})
			}
		},
		async showDefault(){
			let data = await this.$api('GET',this.url+'/'+this.value)
			this.radioChange({e:{target:{value:data}}})
		},
		async getData(reload = true){
			if (reload) {
				this.datas = []
				this.page = 0
			}
			this.page++
			let list = await this.$api('GET',this.url,{keyword:this.keyword,page:this.page,pageSize:10})
			if (list.data.length > 0) {
				this.datas = this.datas.concat(list.data)
			}
		}
	}
}
</script>

<style lang='scss'>
	.showButton{
		line-height: 30rpx;
		height: 60rpx;
		font-size: 24rpx;
		vertical-align: top;
		background: #fff;
		border:1rpx solid #eeeeee;
		border-radius: 10rpx;
		text-align: left;
		padding: 10rpx;
		letter-spacing: 0;
		display: -webkit-box;
		overflow: hidden;
		text-overflow: ellipsis;
		word-wrap: break-all;
		word-break: break-all;
		white-space: pre-wrap;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}
	.showButton:hover{
		border:1rpx solid #45b984;
	}
	.modal{
		z-index: 298;
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		background: rgba(0, 0, 0, 0.4);
		.main{
			z-index: 299;
			position: relative;
			flex-direction: column;
			align-items: center;
			padding: 20rpx 10rpx;
			border-radius: 12rpx;
			width: 90%;
			max-height: 80%;
			background: #ffffff;
			.search-view {
				border-radius: 10rpx;
				background-color:#fff;
				display: flex;
				align-items: center;
				flex-direction: row;
				height: 60rpx;
				padding: 0 5rpx;
				font-size:22rpx;
				.search-input {
					display: flex;
					border-radius: 48rpx;
					background-color: #e7e7e7;
					padding: 0 10rpx;
					width:100%;
					height: 50rpx;
					line-height: 50rpx;
					.icon {
						padding: 0 10rpx;
						color:#666666;
					}
					input{
						width:65%;
						text-align: left;
					}
				}
			}
			.table {
				width: 100%;
				overflow-x: scroll;
				border-right: solid 1px #E0E0E0;
				.tr {
					display: flex;
					justify-content: space-between;
				}
				.th,.td {
					padding: 10rpx;
					border-bottom: 1rpx solid #dadada;
					border-right: 1rpx solid #dadada;
					text-align: center;
					display: flex;
					align-items: center;
					justify-content: center;
					width: 150rpx;
					font-size: 24rpx;
					line-height: 30rpx;
					letter-spacing: 0;
					display: -webkit-box;
					overflow: hidden;
					text-overflow: ellipsis;
					word-wrap: break-all;
					word-break: break-all;
					white-space: pre-wrap;
					-webkit-line-clamp: 3;
					-webkit-box-orient: vertical;
				}
				.th {
					white-space:nowrap;
					font-weight: bold;
					background-color: #dadada;
				}
				.active {
					background-color:#e8e8e8;
				}
			}
		}
	}
</style>
